<template>
        <div class="tb">
            <mt-field label="其他燃料类型名称:" placeholder="请输入" type="text" v-model="fzdcbfd72019001" ></mt-field>
            <mt-field label="对应车牌号码:" placeholder="请输入" type="text" v-model="fzdcbfd72019002" ></mt-field>
            <mt-field label="对应车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor" ></mt-field>
            <div class="button">
                <mt-button type="primary" size="large" @click="check">确定</mt-button>
            </div>
            <!-- 车牌颜色选择器 -->
            <mt-popup
            v-model="popupVisibleColor"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom">
            <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
                <div class="picker-toolbar-title">
                <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
                <div class>请选择车牌颜色</div>
                <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
                </div>
            </mt-picker>
            </mt-popup>
        </div>
    </template>
    
    <script>
        import { Field } from 'mint-ui';
        import {Toast} from 'mint-ui'
        export default {
            data() {
                return {
                        recid: "",
                        yhmlk: "",
                        fzdcbfd72019001: '',
                        fzdcbfd72019002: '',  
                        fzdcbfd72019003: '',     
                        slotsColor: [
                            {
                            values: [{"code":"1","flag":"Dcq","name":"蓝色"},
                            {"code":"2","flag":"Dcq","name":"黄色"},
                            {"code":"3","flag":"Dcq","name":"黑色"},
                            {"code":"4","flag":"Dcq","name":"白色"},
                            {"code":"5","flag":"Dcq","name":"黄绿"},
                            {"code":"6","flag":"Dcq","name":"渐变绿"},
                            {"code":"9","flag":"Dcq","name":"其他"},]
                            }
                        ],
                        currentTagsColor: {},
                        popupVisibleColor: false,  
                }
            },
            watch: {
                
            },
            created() {
                
            },
            mounted() {
                this.getDate();
            },
            methods: {
                getDate(){
                    let data = {};
                    data.recid = this.$route.query.recid;
                    this.axios.post('http://zxdc.catsic.com:9090/sampling/assit/selectFzdcbfd07', {'data': data}, {
                        'headers': {
                            'Content-Type': 'application/json',
                            'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                        }
                    }).then(result => {
                        if (result.data.status == "1000") {
                            let Fzdcbfd07 = result.data.data.Fzdcbfd07;
                            this.recid = Fzdcbfd07.recid,
                            this.yhmlk= Fzdcbfd07.yhmlk,
                            this.fzdcbfd72019001 = Fzdcbfd07.fzdcbfd72019001,
                            this.fzdcbfd72019002 = Fzdcbfd07.fzdcbfd72019002,
                            this.fzdcbfd72019003 = Fzdcbfd07.fzdcbfd72019003,
                            this.currentTagsColor.name = this.getCarColorName(Fzdcbfd07.fzdcbfd72019003);
                            this.floatorder = Fzdcbfd07.floatorder;
                        }
                    }, error => {
                        console.log("getyhcars request error:" + error);
                    });
                },
                // 校验条件
                check(){
                    if(this.fzdcbfd72019001 == ''){
                        Toast("其他燃料类型名称不能为空！");
                    } else if(this.fzdcbfd72019002 == ''){
                        Toast("对应车牌号码不能为空！");
                    } else {
                        this.commit();
                    }
                },
                commit() {
                    let data = {};
                    let fzdcbfd07 = {};
                    fzdcbfd07.recid = this.recid,
                    fzdcbfd07.yhmlk = this.yhmlk = this.$route.query.yhmlk,
                    fzdcbfd07.fzdcbfd72019001 = this.fzdcbfd72019001,
                    fzdcbfd07.fzdcbfd72019002 = this.fzdcbfd72019002,
                    fzdcbfd07.fzdcbfd72019003 = this.fzdcbfd72019003,
                    
                    fzdcbfd07.floatorder = this.floatorder,
                    data.fzdcbfd07 = fzdcbfd07,
                    this.axios.post('http://zxdc.catsic.com:9090/sampling/assit/modifyFzdcbfd07', {'data': data}, {
                        'headers': {
                            'Content-Type': 'application/json',
                            'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                        }
                    }).then(result => {
                        if (result.data.status == "1000") {
                            console.log("保存成功");
                            console.log(result)
                            this.goback();
                        }
                    }, error => {
                        console.log("getyhcars request error:" + error);
                    });
                },
                // 选择车牌颜色
                choseColor() {  
                    this.popupVisibleColor = true;
                },
                //车牌颜色
                handleConfigColor: function() {
                    this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
                    this.fzdcbfd72019003 = this.currentTagsColor.code;
                    this.popupVisibleColor = false;
                },
                // 获取车牌颜色名称
                getCarColorName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
                goback() {
                    this.$router.go(-1);
                },
 
            },
        }
    </script>
    
    <style lang="scss" scoped>
        .tb {
            padding-top: 10px;
        }
    
        .mint-cell {
            background-color: #efeff4;
        }
        input[type=number] {
        line-height: 21px;
        width: 100%;
        height: 40px;
        margin-bottom: 0px;
        padding: 10px 15px;
        -webkit-user-select: text;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 3px;
        outline: 0;
        background-color: #fff;
        -webkit-appearance: none;
    }
        .button {
            padding-top: 3%;
            padding-left: 5%;
            padding-right: 5%;
            padding-bottom: 5%;
        }
        .picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
    </style>